/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;

    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}

.wrapper header .businessInfo-text {
    font-size: 4.8vw;
    color: #fff;
    margin: 0 auto;
}

/****************** 商家部分 ******************/
.wrapper .business-logo {
    margin: 22vw 0 10vw;
    width: 100%;
    height: 32vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .business-logo img {
    width: 50vw;
    height: 40vw;
    border-radius: 5px;
}

.wrapper .business-info {
    width: 100%;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.wrapper .business-info h1 {
    font-size: 5vw;
}

.wrapper .business-info p {
    font-size: 3vw;
    color: #666666;
    margin-top: 2vw;
}

/****************** 菜品列表部分 ******************/
.wrapper .food-list {
    width: 100%;
    margin-bottom: 15vw;
}

.wrapper .food-list li {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .food-list li .foods-left {
    display: flex;
    align-items: center;
}

.wrapper .food-list li .foods-left img {
    width: 20vw;
    height: 20vw;
}

.wrapper .food-list li .foods-left-info {
    margin-left: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper .food-list li .foods-left-info h3 {
    font-size: 3.5vw;
    color: #555555;
}

.wrapper .food-list li .foods-left-info p {
    font-size: 3vw;
    color: #777777;
}

.wrapper .food-list li .foods-right {
    width: 18vw;
    margin-right: 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .food-list li .foods-right .fa-minus-circle {
    font-size: 5.5vw;
    color: #888888;
    cursor: pointer;
}

.wrapper .food-list li .foods-right p {
    font-size: 3.5vw;
    color: #333333;
    cursor: pointer;
}

.wrapper .food-list li .foods-right .fa-plus-circle {
    font-size: 5.5vw;
    color: #0097FF;
    cursor: pointer;
}

    /****************** 底部购物车部分 ******************/
.wrapper .cart {
    width: 100%;
    height: 14vw;

    /* 固定底部定位 */
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
}

.wrapper .cart .cart-left {
    flex: 2;
    background-color: #505051;

    display: flex;
}

.wrapper .cart .cart-left .card-left-icon{
    width: 16vw;
    height: 16vw;
    box-sizing: border-box;
    border: solid 1.5vw #444444;
    border-radius: 8vw;
    background-color: #0097FF;
    font-size: 7vw;
    color: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}

.wrapper .cart .cart-left .card-left-icon .cart-left-icon-quantity {
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
    width: 5vw;
    height: 5vw;
    border-radius: 2.5vw;
    background-color: red;
    color: white;
    font-size: 3.6vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .cart .cart-left .cart-left-info {
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper .cart .cart-left .cart-left-info p:first-child {
    font-size: 5vw;
    color: white;
}

.wrapper .cart .cart-left .cart-left-info p:last-child {
    font-size: 3.5vw;
    color: #888888;
}

.wrapper .cart-right {
    flex: 1;
    background-color: #38ca73;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper .cart .cart-right .cart-right-item {
    font-size: 6.5vw;
    color: white;
    font-weight: 700;
}